import React, { Component } from 'react';
import { inject, observer } from 'mobx-react';

import { WeaLocaleProvider, WeaRightMenu, WeaDialog } from 'ecCom';
import { Button } from 'antd';
import UpdateOperatorContent from './UpdateOperatorContent';
import * as mobx from 'mobx';
import * as dialogTypes from '../../constants/OdocCompsDialogType';

const { getLabel } = WeaLocaleProvider;
/**
 * 流程动态修改操作者
 * 加操作者，或者减少操作者，或者修改状态
 */
@inject('updateOperatorStore', 'odocCompsStore')
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      height: 680,

    };
    this.initButtons();
  }

  render() {
    const { odocCompsStore, dilogotherparams = {} } = this.props;
    let { visible = true, height = 680 } = this.state;


    let contentparams = {};
    let testcontent;
    try {
      const { subparams = { dialogType } } = dilogotherparams;
      let { requestParam = {}, dialogVisible } = odocCompsStore;
      requestParam = mobx.toJS(requestParam);
      contentparams = { ...requestParam, ...subparams };
      visible = dialogVisible.get(dialogTypes.ODOC_UPDATEOPERATOR_DIALOG);
    } catch (e) {
      testcontent = <button onClick={() => this.setState({ visible: true })}>打开</button>;
    }
    contentparams.height = height;
    let dialogparams = {
      style: { width: 800, height },
      title: getLabel(130107, '加减签'),
      visible,
      onCancel: this.onCancel,
      buttons: this.getButtons(),
      ...dilogotherparams,
    };

    return (
      <div style={{ height: '100%' }}>
        {testcontent}
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@6nm194`} {...dialogparams}>
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@iloxo4`} datas={this.getRightMenu()}>
            <UpdateOperatorContent ecId={`${this && this.props && this.props.ecId || ''}_UpdateOperatorContent@1f0y9t`} visible={visible} contentparams={contentparams} />
          </WeaRightMenu>
        </WeaDialog>
      </div>
    );
  }
  onCancel = () => {
    const { updateOperatorStore, onClose } = this.props;
    const { destory, changenumber = 0 } = updateOperatorStore;
    if (changenumber > 0) { // 刷新表单
      const { odocCompsStore } = this.props;
      const { dialogParam = {} } = odocCompsStore;
      const param = dialogParam[dialogTypes.ODOC_UPDATEOPERATOR_DIALOG] || {};
      const { onSuccess } = param;
      typeof onSuccess == 'function' && (onSuccess());
    }
    onClose && typeof onClose == 'function' && (onClose({ cancel: false }));
    destory && typeof destory == 'function' && (destory());
    this.setState({ visible: false });
  }
	/**
	 * dialog获取底部按钮
	 * @returns {Array}
	 */
  getButtons = () => {
    let buttons = [];
    const { updateOperatorStore } = this.props;
    const { allbuttons } = updateOperatorStore;
    allbuttons && allbuttons.map((item, index) => {
      buttons.push([<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@j3au8y@${index}`} {...item}>{item.content}</Button>]);
    });
    return buttons;
  }


  initButtons = () => {
    const { updateOperatorStore } = this.props;
    updateOperatorStore.allbuttons = [
      {
        key: 'close',
        icon: <i className="icon-coms-go-back" />,
        content: getLabel(201, '取消'),
        onClick: this.onCancel,
        type: 'ghost',
      },
    ];
  }

  getRightMenu = () => {
    const { updateOperatorStore } = this.props;
    const { allbuttons } = updateOperatorStore;

    let buttons = [];
    allbuttons && allbuttons.map((item) => {
      buttons.push({ ...item });
    });
    return buttons;
  }
}

export default Index;
